<template>
    <div class="class_main">
        <el-menu default-active="2" class="el-menu-vertical-demo dark-mode" style="height: 100%;" text-color="#ffffff"
            active-text-color="#1E90FF" background-color="#33445c" :collapse="isCollapse" @select="handSelect"
            @open="handleOpen" @close="handleClose">

            <el-sub-menu index="1" popper-class="dark-mode">
                <template #title>
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>首页</span>
                </template>
                <el-sub-menu index="1-1">
                    <template #title><span>今日统计</span></template>
                    <el-menu-item index="1-1-1">详情统计</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="1-2">
                    <template #title><span>流水详情</span></template>
                    <el-menu-item index="1-2-1">详情列表</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
            <el-sub-menu index="2">
                <template #title>
                    <el-icon><icon-menu /></el-icon>
                    <span>用户管理</span>
                </template>
                <el-menu-item index="2-1">用户列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
                <template #title>
                    <el-icon>
                        <document />
                    </el-icon>
                    <span>订单管理</span>
                </template>

                <el-menu-item index="3-1">订单列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
                <template #title>
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>系统管理</span>
                </template>
                <el-menu-item index="4-1">系统列表</el-menu-item>
            </el-sub-menu>
        </el-menu>
        <div class="class_content">
            <div class="class_head_div">
                <el-row>
                    <el-col class="col col-left" :span="12">
                        <div class="head-div">
                            <el-icon @click="collapseBtn"><SetUp /></el-icon>
                            <span style="margin-left: 10px; ">首页</span>
                        </div>
                    </el-col>
                    <el-col class="col col-right" :span="12">
                        <div class="div-right">
                            <div class="div-grid">
                                <el-button type="primary" size="small" class="btn-right">操作文档</el-button>
                                <el-icon class="icon-right"><DataLine /></el-icon>
                                <span>今天学习有限公司</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="col-left-head">
                    <el-col :span="24">
                        <span class="grid-content-head">首页管理</span>
                    </el-col>
                </el-row>
            </div>

            <el-card class="box-card">
                <router-view></router-view>
            </el-card>

        </div>
    </div>
</template>


<style>
.el-header {
    background-color: white;
    color: #333;
    height: 80px;
}

.col {
    margin-top: 10px;
    margin-bottom: 25px;
}

.head-div {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.class_content {
    flex: 1;
    background-color: white;
    overflow: hidden;
}
.icon-right{
    margin-right: 10px;
}
.btn-right {
    margin-right: 10px;
}
.class_head_div {
    border-bottom: 1px solid rgb(160, 155, 155);
}

.col-left-head {
    margin-bottom: 3px;
    margin-left: 15px;
}

.col-right {
    padding-right: 10px;
}

.div-right {
    float: right;
}
.grid-content-head {
    border: 1px solid rgb(160, 155, 155);
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    font-size: smaller;
}

.class_main {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
}

.box-card {
    margin: 15px;
    height: 85vh;
}

/* 局部样式覆盖 */
/* 如果你需要在当前组件内设置样式 */
/* 设置选中item的背景色 */
/* 用于选择同时具有 el-menu-item 和 is-active 类的元素 */
/* .el-menu-item.is-active {
  background-color: #1d60c5!important;
} */
</style>


<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import {
    HomeFilled,
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    ArrowLeftBold,
} from '@element-plus/icons-vue'


//首先在setup中定义
const router = useRouter()

const isCollapse = ref(false)

function collapseBtn() {
    isCollapse.value = !isCollapse.value
}

const handleOpen = (key, keyPath) => {
}

const handleClose = (key, keyPath) => {
}

const handSelect = (key, keyPath) => {
    if ("1-1-1" === key) {
        router.push('/login');
    } else if ("1-2-1" === key) {
        router.push('/main');
    } else if ("2-1" === key) {
        router.push('/user_list');
    } else if ("3-1" === key) {
        router.push('/order_list');
    } else if ("4-1" === key) {
        router.push('/system_list');
    }
    
}
</script>
